/*----------------------------页面区域---------------------------------*/
<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>前端web引用api的时候使用,vue3 stup 语法</span>
                <el-button class="button" type="text" @click="selectText">选中文本</el-button>
                <el-button class="button" type="text" @click="copyCode">一键复制</el-button>
            </div>
        </template>
        <div class="gfcodeboxwebother">
    <pre ref="gfcode" class="gfcode">         
// 头部公共区域--开始
import { reactive,getCurrentInstance } from 'vue'
import {
  api{{ props.data.name }}Creat,
  api{{ props.data.name }}Update,
  api{{ props.data.name }}Read,
  api{{ props.data.name }}Delete,
  api{{ props.data.name }}DeleteByIds,
  api{{ props.data.name }}List
} from '@/mycode/api/{{ props.data.name }}'  
const { proxy } = getCurrentInstance()
// 头部公共区域--结束

//  {{ props.data.name }}-------- 代码自动生成部分------------开始
const {{ props.data.name }}data = reactive({
    id: '',
    ids: [],
    type: '',
    ishow: false,
    loading: false,
    form: {},
    list: [],
    page:{
        title: null,
        from: 1,
        limit: 50
    }
})
// Creat 
const {{ props.data.name }}Creat = async() => {
    const res = await api{{ props.data.name }}Creat({ form: {{ props.data.name }}data.form })
    if (res.status === 1 && res.error == "") {
        proxy.$message.success('请求成功')
        {{ props.data.name }}data.form = {}
        // 更新数据列表
        {{ props.data.name }}List()
    }else{proxy.$message.error('发生错误,错误原因:' + res.error)}
}
// Update 
const {{ props.data.name }}Update = async () => {
    data.loading = true
    const res = await api{{ props.data.name }}Update({ form: {{ props.data.name }}data.form })
    data.loading = false
    if (res.status === 1 && res.error == "") {
        proxy.$message.success('请求成功')
        // 更新数据列表
        {{ props.data.name }}List()
    }else{proxy.$message.error('发生错误,错误原因:' + res.error)}
}
// Read 
const {{ props.data.name }}Read = async () => {
    data.loading = true
    const res = await api{{ props.data.name }}Read({ id: {{ props.data.name }}data.id })
    data.loading = false
    if (res.status === 1 && res.error == "") {
        proxy.$message.success('请求成功')
        {{ props.data.name }}data.form = res.data.form
    }else{proxy.$message.error('发生错误,错误原因:' + res.error)}
}
// Delete
const {{ props.data.name }}Delete = async () => {
    const res = await api{{ props.data.name }}Delete({ id: {{ props.data.name }}data.id })
    if (res.status === 1 && res.error == "") {
        proxy.$message.success('请求成功')
        // 更新数据列表
        {{ props.data.name }}List()
    }else{proxy.$message.error('发生错误,错误原因:' + res.error)}
}
// DeleteByIds
const {{ props.data.name }}DeleteByIds = async () => {
    const res = await api{{ props.data.name }}DeleteByIds({ ids: {{ props.data.name }}data.ids })
    if (res.status === 1 && res.error == "") {
        proxy.$message.success('请求成功')
        // 更新数据列表
        {{ props.data.name }}List()
    }else{proxy.$message.error('发生错误,错误原因:' + res.error)}
}
// List 读取数据列表
const {{ props.data.name }}List = async () => {
    data.loading = true
    const res = await api{{ props.data.name }}Read({ page: {{ props.data.name }}data.page })
    data.loading = false
    if (res.status === 1 && res.error == "") {
        console.log(res.data);
        proxy.$message.success('请求成功')
        {{ props.data.name }}data.list = res.data.list
    }else{proxy.$message.error('发生错误,错误原因:' + res.error)}
}

/*   {{ props.data.name }}--------代码自动生成部分------------结束*/
    </pre>
        </div>

    </el-card>
</template>
/*----------------------------逻辑区域---------------------------------*/
<script setup>
import {ref,getCurrentInstance  } from 'vue'
const { proxy } = getCurrentInstance()
const gfcode = ref(null)
const props = defineProps({
    data: {
        type: Object
    }
})
function copyCode(){
    proxy.$copyText(gfcode.value.innerHTML).then(function (e) {
          proxy.$message.success('复制成功')
          console.log(e)
        }, function (e) {
          proxy.$message.error("复制失败")
          console.log(e)
        })
}
function selectText(){
    var range = document.createRange();
    var referenceNode =  document.getElementsByClassName("gfcodeboxwebother").item(0); 
    console.log(referenceNode);
    range.selectNodeContents(referenceNode);
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range) 
}
</script>
<style lang="scss" scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.text {
    font-size: 14px;
}
.item {
    margin-bottom: 18px;
}
.box-card {
    width: 480px;
}
.gfcode {
    background-color: #f3f4f6;
    padding: 20px;
}
</style>

